<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #ul {
            font-size: 0;
            font-family: Microsoft YaHei;
            display: inline-block;
        }

        #ul li {
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
            list-style: none;
            float: left;
            padding: 8px 14px;
            font-size: 13px;
            border: 1px solid #ccc;
            margin: 2px;
            cursor: pointer;
            color: #585858;
        }

        #div {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30px;
        }

        #ul .background {
            background: #39C6F4;
            color: white;
            border: 1px solid #39C6F4;
        }
    </style>
</head>

<body>
    <div id='div'>
        <ul id='ul'>
            <li>首页</li>
            <li>上一页</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>下一页</li>
            <li>尾页</li>
        </ul>
    </div>
    <script>
        var ul = document.getElementById('ul');
        var li = ul.getElementsByTagName('li');
        li[2].className = 'background';
        var num01 = 1;
        var num02 = 800 /*总数*/ ;
        //1 //首页的点击事件
        li[li.length - li.length].onclick = function() {
                Background(2);
                num01 = 1;
                content(num01);
            }
            //2 //尾页的点击事件
        li[li.length - 1].onclick = function() {
                Background(li.length - 3);
                num01 = num02 - (li.length - 5);
                content(num01)
            }
            //3 //上一页的点击事件
        li[li.length - (li.length - 1)].onclick = function() {

                for (var j = 0; j < li.length - 4; j++) {
                    if (li[j + 2].className == 'background' && li[j + 2].innerHTML != 1) {
                        if (j + 2 != li.length - (li.length - 2)) {
                            Background(j + 1);
                        }
                        break;
                    }
                }
                if (j + 2 == li.length - (li.length - 2)) {
                    num01--;
                    content(num01);
                }
            }
            //4 下一页的点击事件
        li[li.length - 2].onclick = function() {
                for (var j = 0; j < li.length; j++) {
                    if (li[j].className == 'background' && li[j].innerHTML < num02) { //* && 写最后一页的总数*/
                        if (j + 1 < li.length - 2) {
                            Background(j + 1);
                        }
                        break;
                    }
                }
                if (j + 1 == li.length - 2) {
                    num01++;
                    content(num01);
                }
            }
            //     分页的点击事件
        for (var i = 0; i < li.length - 4; i++) {
            li[i + 2].index = i + 2;
            li[i + 2].onclick = function() {
                Background(this.index);
            }
        }
        //把所有的分页背景去掉，给指定的分页添加背景颜色
        function Background(num) {
            for (var i = 0; i < li.length; i++) {
                li[i].className = li[i].className.replace('background', '');
                li[num].className = 'background';
            }
        }
        // 给li 写内容
        content(num01);

        function content(number) {
            for (var i = 0; i < li.length - 4; i++) {
                li[i + 2].innerHTML = number;
                number++;
            }
        }
    </script>
</body>

</html>
